<template>
  <!-- 储备物资 -->
  <div class="cbryCard">
    <div class="topArea">
      <div></div>
      <div>
        <el-radio-group v-model="tabPosition" @change="tabChange">
          <el-radio-button label="top">单位</el-radio-button>
          <el-radio-button label="bottom">大类</el-radio-button>
          <!-- <el-radio-button label="right" disabled>专业</el-radio-button> -->
        </el-radio-group>
      </div>
    </div>
    <div class="bottomArea">
      <BarCharts :option="option" chartId="yjglsydw9" barChartsId="yjglsydw10" :barColors="barColors"></BarCharts>
    </div>
  </div>
</template>

<script>
import BarCharts from "@/components/highCharts/NewBarCharts.vue";
import { resourceSYStatistics } from "@/api/EmergencyResources/EmergencyResources";
export default {
  name: "CbryCard",
  components: { BarCharts },
  props: {
    chartsId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      barColors: [
        { color2: "#2E58DB60", color1: "#68D2E0" }
      ],
      tabPosition: "top",
      data1: [], // 在途中
      data2: [], // 已到达
      teamData: [],
      option: {
        barWidth: 36, // 柱子宽度
        basePointX: 50,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 70,
          ch2: 30,
          ch3: 100
        },
        grid: {
          left: 50, // 左边距离
          right: 0, // 右边距离
          top: 16,
          bottom: 6
        },
        legends: ["物资"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      xAxisData: []
    };
  },
  mounted() {
    this.getResourseData();
  },
  methods: {
    tabChange(key) {
      if (key === "top") {
        this.getResourseData("unit");
      } else if (key === "right") {
        this.getResourseData("major");
      } else {
        this.getResourseData("largeCategory");
      }
    },
    getResourseData(groupType = "unit") {
      const params = {
        groupType,
        type: "WZ"
      };
      resourceSYStatistics(params).then(res => {
        if (res && res.length > 0) {
          this.data1 = [];
          this.xAxisData = [];
          res.forEach(el => {
            this.data1.push(el.total);
            if (groupType === "unit") {
              this.xAxisData.push(el.unitName);
            } else if (groupType === "largeCategory") {
              this.xAxisData.push(el.largeCategory);
            }
          });
          this.option.xAxis[0].data = this.xAxisData;
          this.option.series = this.data1.map(el => {
            return [el];
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.cbryCard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .topArea {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    color: #fff;

    /deep/.el-radio-button:first-child .el-radio-button__inner {
      border-radius: 30px 0 0 30px;
    }

    /deep/.el-radio-button:last-child .el-radio-button__inner {
      border-radius: 0 30px 30px 0;
    }

    /deep/.el-radio-button__inner {
      cursor: pointer;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      background: transparent;
      border: 1px solid #0B5F9480;
      width: 70px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }
    /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      background: #409EFF;
    }
  }

  .bottomArea {
    flex: 1;
    width: 100%;
  }
}
</style>
